<template>
    <div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="loginname" name="loginname" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>


    </div>
</template>

<script setup lang="ts">
import { Dialog } from 'vant';
import { useRouter } from 'vue-router'
// 导入接口
import { getuserinfo, UserAPI } from '@/api/loginApi';
// 引入userUserStore，就是获取到的store仓库的实例对象，相当于vuex中的this.$store
import { useUserStore } from '@/store/useUserStore'
import { ref, reactive, computed, watch, defineProps, defineEmits, onMounted } from 'vue'
import router from '@/router';
const UserStore = useUserStore()
const Router = useRouter()
let loginname = ref('19806267296')
let password = ref('Zxyygwq0626!')




let onSubmit = (values: { loginname: string, password: string }) => {
    console.log('submitValues', values);
    // 点击提交按钮调用接口
    UserAPI(values).then((res: any) => {
        console.log('登录数据', res);
        if (res.code == '10010') {
            // Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框
            Dialog.alert({ message: '用户未注册！' }).then(() => {
                // 点击确认，跳转到注册页
                Router.push('/register/step1')
            });
        } else if (res.code == '200') {
            // 登录成功后跳转到首页，把token存到本地

            // 将用户信息存到Pinia中
            UserStore.setUseId(res.data.userid)
            localStorage.setItem('token', res.data.token)
            // UserStore.setToken(res.data.token)
            // console.log('token',res.data.token);
            router.push('/home')
        }

    })

}

</script>
<style scoped>
.van-button {
    background-color: #D30707;
    border: #D30707;
}
</style>